import React from 'react';
import { Select } from 'antd';
import { isFunction } from '../../../utils/is-object';

export default function createSelect(config = {}) {
  const {
    property,
    data = {},
    size = 'small',
    onChange,
    getter = (data, property) => data[property],
    getValue = value => value,
    options = [],
    mode,
  } = config;
  const onChangeHandler = value => {
    if (isFunction(getValue)) {
      value = getValue(value);
    }
    if (isFunction(onChange)) {
      onChange(value, property);
    }
  };
  const value = getter(data, property);
  return (
    <Select
      dropdownClassName="properties-panle-dropdown"
      value={value}
      size={size}
      onChange={onChangeHandler}
      mode={mode}
    >
      {options.map(option => (
        <Select.Option key={option.value} value={option.value}>
          {option.label}
        </Select.Option>
      ))}
    </Select>
  );
}
